<template>
<el-dialog
  :title="editModal ? '编辑话题' : '添加话题'"
  :visible="modalVisible"
  :before-close="handleClose"
  :close-on-click-modal="false"
  class="topic-modal"
>
  <el-form
    :model="currentTopic"
    :rules="rules"
    ref="ruleForm"
    label-width="120px"
  >
    <el-form-item label="话题ID">
      <el-input
        type="text"
        v-model="currentTopic.topic_id"
        disabled
      />
    </el-form-item>
    <el-form-item
      label="话题分类"
      prop="category_id"
    >
      <el-select
        v-model="currentTopic.category_id"
        placeholder="请选择话题分类"
      >
        <el-option
          v-for="option in topicCategoryOptions"
          :label="option.name"
          :value="option.category_id"
          :key="option.category_id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="名称"
      prop="title"
    >
      <el-input
        v-model="currentTopic.title"
        auto-complete="off"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="描述"
      prop="description"
    >
      <el-input
        type="textarea"
        v-model="currentTopic.description"
        auto-complete="off"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="话题图片"
      prop="picture"
      ref="upload_picture"
    >
      <UploadFile
        type="image"
        @onSuccess="handleAvatarSuccess"
        :limit="1"
        :img-list="currentTopic.picture ? [{ url: imgHost + currentTopic.picture }] : ''"
      >></UploadFile>
      <p
        class="err-msg"
        v-if="!currentTopic.picture && submited"
      >
        请上传话题图片
      </p>
      <span style="color: red;">请上传尺寸长为999像素，宽为288像素的图片</span>
    </el-form-item>
  </el-form>
  <div
    slot="footer"
    class="dialog-footer"
  >
    <el-button @click="handleClose">取 消</el-button>
    <el-button
      type="primary"
      @click="handleSubmit('ruleForm')"
    >确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from "vuex";
import UploadFile from "@/components/UploadFile";
export default {
  name: "AddTopicModal",
  props: ["topicObject"],
  components: {
    UploadFile,
  },
  data() {
    return {
      currentTopic: {},
      submited: false, //是否点击了提交
      rules: {
        title: [{
          required: true,
          message: "请输入话题名称",
          trigger: "blur",
        }, ],
        category_id: [{
          required: true,
          message: "请选择话题分类",
          trigger: "change",
        }, ],
        description: [{
          required: true,
          message: "请输入话题描述",
          trigger: "blur",
        }, ],
      },
      uploading: false,
    };
  },
  watch: {
    topicObject(value) {
      this.currentTopic = value;
    },
  },
  computed: {
    ...mapState({
      modalVisible: (state) => state.topicMangeStore.addTopicModalVisible,
      editModal: (state) => state.topicMangeStore.isEdit,
      topicCategories: (state) => state.topicMangeStore.topicCategories,
    }),
    ...mapGetters(["topicCategoryOptions"]),
  },
  methods: {
    handleAvatarSuccess(file) {
      this.currentTopic.picture = file[0].name;
      this.uploading = false;
    },
    handleProgress() {
      this.uploading = true;
    },
    handleClose() {
      if (!this.editModal) {
        this.submited = false;
        this.$refs["ruleForm"].resetFields();
      } else {
        this.currentTopic = this.topicObject;
      }
      this.closeAddTopicModal();
    },
    handleSubmit(formName) {
      this.submited = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.currentTopic.picture) {
            this.createTopic();
          } else {}
        } else {
          return false;
        }
      });
    },
    //添加话题
    createTopic() {
      let method = this.editModal ? "$put" : "$post";
      let params = {
        title: this.currentTopic.title,
        picture: this.currentTopic.picture,
        description: this.currentTopic.description,
        category_id: this.currentTopic.category_id,
      };
      if (this.editModal) {
        params.topic_id = this.currentTopic.topic_id;
      }
      this[method]("trend/topic", params)
        .then((resp) => {
          this.closeAddTopicModal();
          this.$emit("reload");
          this.$message.success("创建成功");
        })
        .catch((msg) => {
          this.$message.error("创建失败,请重试");
        });
    },
    ...mapMutations(["closeAddTopicModal"]),
  },
};
</script>

<style scoped>
.err-msg {
  margin: 0;
  color: #f56c6c;
  font-size: 12px;
}
</style>
